<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!--定义网页名-->
	<title>小米商城 - 小米MIX 2S、 红米5Plus、 小米6X、 小米电视官方网</title>
	<!--导入CSS样式-->
	<link rel="stylesheet" type="text/css" href="hw.css"/>	
</head>
<body>
	<!--定义网页框架-->
	<div class="container">
		<!--定义副导航栏信息-->
		<div class="topbar-nav" style="line-height: 40px;">
			<!--写入具体信息-->
			<!--本页中所有的超链接都连接本页，仅作演示-->
			<a href="#" style="margin-left: 80px;">小米商城</a> <span class="sep">|</span>
			<a href="#" target="_blank">MIUI</a> <span class="sep">|</span>
			<a href=#">IoT</a> <span class="sep">|</span>
			 <span class="sep">|</span>
			<a href="#" target="_blank">水滴</a> <span class="sep">|</span>
			<a href="#" target="_blank">金融</a> <span class="sep">|</span>
			<a href="#" target="_blank">有品</a> <span class="sep">|</span>
			<a href="#" target="_blank">政企服务</a> <span class="sep">|</span>
			<a href="#">Select Region</a>
			<div class="lsnc" style="margin-top: -45px;">
				<a href="#">登录</a> <span class="sep">|</span>
				<a href="#">注册</a> <span class="sep">|</span>
				<a href="#">消息通知</a> <span class="sep">|</span>
				<a href="#" style="margin-left: 50px">购物车(0)</a> <span class="sep">|</span>
			</div>
		</div>
		<!--定义主导航栏信息-->
		<div class="header-nav">
			<!--导入图片-->
			<img src="./homework/1.PNG"/>
			<!--定义div框架，并设置部分样式-->
			<div style="margin-top: -50px;margin-left: 240px;">
				<!--写入具体信息-->
				<a href="#" target="_blank">小米手机</a>
				<a href="#" target="_blank">红米</a>
				<a href="#" target="_blank">电视</a>
				<a href="#" target="_blank">笔记本</a>
				<a href="#" target="_blank">盒子</a>
				<a href="#" target="_blank">新品</a>
				<a href="#" target="_blank">路由器</a>
				<a href="#" target="_blank">智能硬件</a>
				<a href="#" target="_blank">服务</a>
				<a href="#" target="_blank">社区</a>
			</div>
			<!--插入图片-->
			<img src="./homework/2.PNG" style="float: right; margin-right: 100px;margin-top: -40px;" />
		</div>
		<!--定义手机内容框架-->
		<div class="hot">
			<h4>手机</h4>
			<a href="#"><img class="image4" src="./homework/25.PNG""></a>
			<!--左边div框-->	
			<div class="hot_left">
				<a href="#"><img src="./homework/16.PNG""></a>	
			</div>
			<!--右边div框-->
			<div class="hot_right">
				<!--插入图片-->
				<a href="#"><img src="./homework/17.PNG""></a>	
				<a href="#"><img src="./homework/18.PNG""></a>	
				<a href="#"><img src="./homework/19.PNG""></a>
				<a href="#"><img src="./homework/17.PNG""></a>		
				<a href="#"><img src="./homework/20.PNG""></a>	
				<a href="#"><img src="./homework/21.PNG""></a>	
				<a href="#"><img src="./homework/22.PNG""></a>	
				<a href="#"><img src="./homework/23.PNG""></a>	
			</div>
			<!--家电框-->
			<div class="applications">
				<a href="#"><img src="./homework/26.PNG""></a>	
				<h4>家电</h4>
				<!--插入图片-->
				<a href="#"><img src="./homework/27.PNG""></a>	
				<a href="#"><img src="./homework/28.PNG""></a><br/><br/>	
				<a href="#"><img src="./homework/29.PNG""></a><br/><br/>
				<a href="#"><img src="./homework/30.PNG""></a>	
				<a href="#"><img src="./homework/31.PNG""></a><br/><br/>	
				<a href="#"><img src="./homework/32.PNG""></a><br/><br/>
				<a href="#"><img src="./homework/33.PNG""></a>	
				<a href="#"><img src="./homework/34.PNG""></a><br/><br/>
				<a href="#"><img src="./homework/35.PNG""></a>	
			</div><br/>		
		</div>
		<!--水平分割线-->
		<br/><hr style="width: 1400px;" />
		<!--页尾框-->
		<div class="bottom">
			<!--插入图片-->
			<img class="image1" src="./homework/8.PNG">
			<!--页尾内容-->
			<div class="bottom_word">
				<!--设置一个标记标签-->
				<a class="flag" href="#" target="_blank">小米商城</a><span class="sep">|</span>
				<a href="#" target="_blank">MIUI</a><span class="sep">|</span>
				<a href="#" target="_blank">米家</a><span class="sep">|</span>
				<a href="#" target="_blank">米聊</a><span class="sep">|</span>
				<a href="#" target="_blank">多看</a><span class="sep">|</span>
				<a href="#" target="_blank">游戏</a><span class="sep">|</span>
				<a href="#" target="_blank">音乐</a><span class="sep">|</span>
				<a href="#" target="_blank">路由器</a><span class="sep">|</span>
				<a href="#" target="_blank">米粉卡</a><span class="sep">|</span>
				<a href="#" target="_blank">政企服务</a><span class="sep">|</span>
				<a href="#" target="_blank">小米天猫店</a><span class="sep">|</span>
				<a href="#" target="_blank">隐私政策</a><span class="sep">|</span>
				<a href="#" target="_blank">问题反馈</a><span class="sep">|</span>
				<a href="#" target="_blank">Select Region</a>
			</div>
			<!--插入图片-->
			<img src="./homework/9.PNG"">
			<div class="image2">
				<a href="#"><img src="./homework/10.PNG""></a>
				<a href="#"><img src="./homework/11.PNG""></a>
				<a href="#"><img src="./homework/12.PNG""></a>
				<a href="#"><img src="./homework/13.PNG""></a>
				<a href="#"><img src="./homework/14.PNG""></a>
			</div><br/><br/><br/>
			<img class="image3" src="./homework/15.PNG">
		</div>
	</div>
</body>
</html>